<script src="../../vendor/echarts/theme/macarons.js"></script>

<!-- 数据管理首页正文 -->
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">数据管理首页</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="panel panel-primary">
                <div class="panel-heading fontSize24">
                    <i class="fa fa-bar-chart-o fa-fw"></i> 数据存储情况统计
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="well well-lg">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover table-striped">
                                        <tbody>
                                        <tr>
                                            <th rowspan="2" class="fontSize18">hbase<br>存储<br>信息</th>
                                            <th>物理存储总量（TB）</th>
                                            <th>当日增加物理存储量（GB）</th>
                                            <th>总表数（个）</th>
                                        </tr>
                                        <tr>
                                            <td>450</td>
                                            <td>25</td>
                                            <td>32</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="well well-lg">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover table-striped">
                                        <tbody>
                                        <tr>
                                            <th rowspan="2" class="fontSize18">hive<br>存储<br>信息</th>
                                            <th>物理存储总量（TB）</th>
                                            <th>当日增加物理存储量（GB）</th>
                                            <th>总表数（个）</th>
                                        </tr>
                                        <tr>
                                            <td>540</td>
                                            <td>32</td>
                                            <td>22</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="panel panel-primary">
                <div class="panel-heading fontSize24">
                    <i class="fa fa-bar-chart-o fa-fw"></i> 数据资源接入情况统计
                </div>

                <div class="panel-body">
                    <div>
                        <p>
                            <strong>已接入数据百分比：</strong>
                            <span class="pull-right text-muted">34 (64%)</span>
                        </p>
                        <div class="progress progress-striped active">
                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" style="width: 64%">
                                <span class="sr-only">34 (64%)</span>
                            </div>
                        </div>
                    </div>

                    <div>
                        <p>
                            <strong>未接入数据百分比：</strong>
                            <span class="pull-right text-muted">21 (36%)</span>
                        </p>
                        <div class="progress progress-striped active">
                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100" style="width: 36%">
                                <span class="sr-only">21 (36%)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-primary">
                <div class="panel-heading fontSize24">
                    <i class="fa fa-bar-chart-o fa-fw"></i> 七天数据存储记录量变化图
                </div>

                <div class="panel-body" id="dataManageBox">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#physicalStorage-lineBody" data-toggle="tab">七天物理存储量变化曲线</a>
                        </li>

                        <li>
                            <a href="#totalDataRecord-lineBody" data-toggle="tab">七天逐日数据记录总量变化曲线</a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content" id="tabContBox">
                        <div class="tab-pane fade in active" id="physicalStorage-lineBody">
                            <div id="physicalStorage-lineChart" style="width:100%;max-width:1540px;height:400px"></div>
                        </div>

                        <div class="tab-pane fade" id="totalDataRecord-lineBody">
                            <div id="totalDataRecord-lineChart" style="width:100%;max-width:1540px;height:400px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {

        /* 七天物理存储量变化曲线 */
        var physicalStorageChart = new MyEcharts({
            DOMId: 'physicalStorage-lineChart',
            option: {
                legendDataList: ['hbase','hive'],
                xAxisDataKey: 'date',
                yAxisName: '物理存储量（GB）',
                series: [
                    {
                        name: 'hbase',
                        type: 'line',
                        dataKey: 'hbase'
                    },
                    {
                        name: 'hive',
                        type: 'line',
                        dataKey: 'hive'
                    }
                ],
                yAxisScale: false,
                seriesShowMark: true,
                legendX: 'center',
                legendOrient: 'horizontal'
            },
            dataUrl: '../../server/physicalStorageData.json',
            theme: 'macarons'
        });

        /* 七天逐日数据记录总量变化曲线 */
        $('#totalDataRecord-lineChart').width($('#tabContBox').width());   // 解决B3tab组件与echarts产生bug
        var totalDataRecordChart = new MyEcharts({
            DOMId: 'totalDataRecord-lineChart',
            option: {
                legendDataList: ['hbase','hive'],
                xAxisDataKey: 'date',
                yAxisName: '数据记录总量（TB）',
                series: [
                    {
                        name: 'hbase',
                        type: 'line',
                        dataKey: 'hbase'
                    },
                    {
                        name: 'hive',
                        type: 'line',
                        dataKey: 'hive'
                    }
                ],
                yAxisScale: false,
                seriesShowMark: true,
                legendX: 'center',
                legendOrient: 'horizontal'
            },
            dataUrl: '../../server/totalDataRecordData.json',
            theme: 'macarons'
        });

    })();
</script>

